<template>
    <div id="map-container" style="width: 100%; height: 100vh;"></div>
  </template>
  
<script>
export default {
    name: 'NanjingMap',
    data() {
      return {
        map: null,
        districts: [
          { name: '玄武区', adcode: '320102', color: '#FF0000' },
          { name: '秦淮区', adcode: '320104', color: '#00FF00' },
          { name: '建邺区', adcode: '320105', color: '#0000FF' },
          { name: '鼓楼区', adcode: '320106', color: '#FFFF00' },
          { name: '浦口区', adcode: '320111', color: '#FF00FF' },
          { name: '栖霞区', adcode: '320113', color: '#00FFFF' },
          { name: '雨花台区', adcode: '320114', color: '#FFA500' },
          { name: '江宁区', adcode: '320115', color: '#800080' },
          { name: '六合区', adcode: '320116', color: '#008000' },
          { name: '溧水区', adcode: '320117', color: '#000080' },
          { name: '高淳区', adcode: '320118', color: '#808000' }
        ]
      };
    },
    mounted() {
      this.initMap();
    },
    methods: {
      initMap() {
        this.map = new AMap.Map('map-container', {
          zoom: 10,
          center: [118.7969, 32.0603] // 南京的经纬度
        });
        this.districts.forEach(district => {
          this.loadDistrict(district);
        });
      },
      loadDistrict(district) {
        const { adcode, color } = district;
      console.log(111)

        AMap.plugin('AMap.DistrictSearch', () => {
          const districtSearch = new AMap.DistrictSearch({
            extensions: 'all',
            subdistrict: 0
          });
  
          districtSearch.search(adcode, (status, result) => {
            debugger

            if (status === 'complete') {
              const bounds = result.districtList[0].boundaries;
              bounds.forEach(boundary => {
                const polygon = new AMap.Polygon({
                  path: boundary,
                  strokeColor: color,
                  strokeWeight: 2,
                  fillColor: color,
                  fillOpacity: 0.5
                });
                this.map.add(polygon);
              });
            }
          });
        });
      }
    }
  };
  </script>
  
<style scoped>
  #map-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  </style>